<template>
  <div class="form-container">
    <!-- 顶部提示 -->

    <!-- 表单主体 -->
    <a-form-model
      :model="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
      class="form-body"
    >
      <div v-if="isShowSubmit">
        <a-alert
          :message="
            '链接将于' +
            form.collaborationValidityTime +
            '后失效，请尽快完成填写'
          "
          type="warning"
          show-icon
          class="form-alert"
        >
        </a-alert>

        <!-- 基础信息 -->
        <a-divider style="margin-top: 0px" orientation="left"
          >基础信息</a-divider
        >
        <a-row :gutter="[16, 16]">
          <a-col :lg="{ span: 10, offset: 1 }">
            <a-form-model-item
              label="公司名称"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
              required
            >
              <a-input
                disabled
                v-model="form.companyName"
                placeholder="请输入公司名称"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :lg="{ span: 10, offset: 1 }">
            法定代表人：{{ form.legalPerson }}
          </a-col>
          <a-col :lg="{ span: 10, offset: 3 }">
            统一社会信用代码：{{ form.unifiedCode }}
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :lg="{ span: 10, offset: 1 }">
            注册号：{{ form.registrationNo }}
          </a-col>
          <a-col :lg="{ span: 10, offset: 3 }">
            成立日期：{{ form.incorporationDate }}
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :lg="{ span: 10, offset: 1 }">
            <a-form-model-item
              label="银行账户"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
            >
              <a-input v-model="form.bankAccount" placeholder="请输入银行账户">
                <a-tooltip
                  slot="suffix"
                  title="对公付款银行账号必须与发票签制处销售方账号完全一致！"
                >
                  <a-icon
                    type="info-circle"
                    style="color: rgba(0, 0, 0, 0.45)"
                  />
                </a-tooltip>
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :lg="{ span: 10, offset: 3 }">
            <a-form-model-item
              label="开户行名称"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
            >
              <a-input
                v-model="form.backAccountName"
                placeholder="请输入开户行名称"
              >
                <a-tooltip slot="suffix" title="对公银行单位名称">
                  <a-icon
                    type="info-circle"
                    style="color: rgba(0, 0, 0, 0.45)"
                  />
                </a-tooltip>
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :lg="{ span: 10, offset: 1 }">
            <a-form-model-item
              label="固定电话"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
            >
              <a-input
                v-model="form.fixedTelephone"
                placeholder="请输入固定电话"
              >
                <a-tooltip
                  slot="suffix"
                  title="请填写厂商固定服务电话，400电话或800电话！"
                >
                  <a-icon
                    type="info-circle"
                    style="color: rgba(0, 0, 0, 0.45)"
                  />
                </a-tooltip>
              </a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> -->
          <a-col :lg="{ span: 10, offset: 3 }">
            <a-form-model-item
              label="邮箱"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
            >
              <a-input v-model="form.email" placeholder="请输入邮箱" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <!-- 供应商类型 -->
        <!-- <a-divider orientation="left">供应商类型</a-divider> -->
        <div style="margin-left: 4.5%; margin-bottom: 20%">
          <a-form-model-item
            label="供应商类型"
            required
            :label-col="{ span: 24 }"
            :wrapper-col="{ span: 24 }"
          >
            <a-checkbox-group
              v-decorator="['supplierTypes']"
              style="margin-bottom: 20px"
              v-model="form.supplierType"
            >
              <!-- <div
              class="checkBoxDiv"
              v-for="item in this.$sysDictOptions('supplier_type')"
            >
              <a-checkbox :value="item.k">{{ item.v }}</a-checkbox>
            </div> -->

              <div
                class="checkBoxDiv"
                v-for="item in this.$sysDictOptions('supplier_type')"
              >
                <a-checkbox :value="item.k">{{ item.v }}</a-checkbox>
              </div>
            </a-checkbox-group>
          </a-form-model-item>
          <!-- 备注 -->
          <a-form-model-item
            label="备注"
            :label-col="{ span: 24 }"
            :wrapper-col="{ span: 24 }"
          >
            <a-textarea
              v-model="form.remarks"
              placeholder="请输入备注信息"
              :rows="3"
            />
          </a-form-model-item>
        </div>

        <!-- 联系人 -->
        <a-divider orientation="left">联系人</a-divider>
        <div style="margin-left: 4.5%">
          <a-table
            :columns="columns"
            :dataSource="supplierContactsList"
            :pagination="false"
            bordered
            size="middle"
            rowKey="key"
          >
            <!-- 自定义单元格渲染 - 可编辑单元格 -->
            <template
              v-for="col in editableContactsColumns"
              :slot="col.dataIndex"
              slot-scope="text, record, index"
            >
              <div :key="col.dataIndex" class="editable-cell">
                <a-input
                  v-model="record[col.dataIndex]"
                  @blur="validateContactsField(record, col.dataIndex)"
                  :class="{
                    'error-field':
                      record.errors && record.errors[col.dataIndex],
                  }"
                />
                <div
                  class="error-message"
                  v-if="record.errors && record.errors[col.dataIndex]"
                >
                  {{ record.errors[col.dataIndex] }}
                </div>
              </div>
            </template>

            <!-- 操作列 - 添加/删除行按钮 -->
            <template slot="action" slot-scope="text, record, index">
              <div class="action-buttons">
                <a-tooltip title="添加一行">
                  <a-button
                    type="primary"
                    shape="circle"
                    icon="plus"
                    size="small"
                    @click="addContactsRow(index)"
                    v-if="index === supplierContactsList.length - 1"
                    :disabled="hasErrors"
                  />
                </a-tooltip>
                <a-tooltip title="删除此行">
                  <a-button
                    style="background-color: #d9d9d9"
                    type="default"
                    shape="circle"
                    icon="minus"
                    size="small"
                    @click="removeContactsRow(index)"
                    v-if="supplierContactsList.length > 1"
                  />
                </a-tooltip>
              </div>
            </template>

            <!-- 表头添加必填标识 -->
            <template slot="nameTitle" slot-scope="title">
              <span class="required-label">*</span>{{ title }}
            </template>
            <template slot="phoneTitle" slot-scope="title">
              <span class="required-label">*</span>{{ title }}
            </template>
          </a-table>

          <!-- <div class="table-footer">
          <span class="required-hint"
            ><span class="required-label">*</span> 为必填字段</span
          >
          <a-button
            type="dashed"
            icon="plus"
            @click="addContactsRow(dataSource.length - 1)"
            :disabled="hasErrors"
          >
            添加一行
          </a-button>
        </div> -->
        </div>

        <!-- 企业资质 -->
        <a-divider orientation="left">企业资质</a-divider>
        <a-row>
          <a-col style="margin-left: 4.5%">
            <a-form-model-item
              label="公司地址"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
              :required="true"
              :colon="false"
            >
              <div class="address-input-container">
                <a-form-model-item class="detail-address">
                  <a-input
                    v-model="form.address"
                    placeholder="请填写详细地址"
                  />
                </a-form-model-item>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :lg="{ span: 30, offset: 1 }">
            <a-form-model-item
              label="公司官网"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
            >
              <a-input v-model="form.website" placeholder="请输入公司官网">
                <a-tooltip slot="suffix" title="公司官方网站地址链接">
                  <a-icon
                    type="info-circle"
                    style="color: rgba(0, 0, 0, 0.45)"
                  />
                </a-tooltip>
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <div style="margin-left: 4.5%; margin-top: 3%">
          <a-form-model-item
            label="公司简介"
            :label-col="{ span: 24 }"
            :wrapper-col="{ span: 24 }"
          >
            <a-textarea
              v-model="form.profile"
              placeholder="请输入公司简介"
              :rows="4"
            />
          </a-form-model-item>
          <!-- 主营品类 -->

          <a-form-model-item
            label="主营品类"
            :colon="false"
            style="margin-top: 15%"
            :label-col="{ span: 24 }"
            :wrapper-col="{ span: 24 }"
          >
            <div class="description">
              公司主要经营的产品类别，例如监护仪、呼吸机等
            </div>

            <div
              v-for="(item, index) in categoryList"
              :key="index"
              style="display: inline-block"
            >
              <a-input
                v-model="categoryList[index]"
                placeholder="请输入"
                style="width: 90px; display: inline-block; margin: 5px 5px"
              />
              <a-button
                style="margin-right: 5px; background-color: #d9d9d9"
                type="default"
                shape="circle"
                icon="minus"
                size="small"
                @click="removeCategory(index)"
              />
            </div>

            <a-button
              type="primary"
              class="add-button"
              icon="plus"
              @click="handleAddCategory"
            >
              添加
            </a-button>
          </a-form-model-item>

          <!-- 主营品牌 -->

          <a-form-model-item
            label="主营品牌"
            :colon="false"
            style="margin-top: 8%"
            :label-col="{ span: 24 }"
            :wrapper-col="{ span: 24 }"
          >
            <div class="description">
              公司主要经营或合作的品牌，列如联影、GE(通用电气)、等
            </div>

            <div
              v-for="(item, index) in brandList"
              :key="index"
              style="display: inline-block"
            >
              <a-input
                v-model="brandList[index]"
                placeholder="请输入"
                style="width: 90px; display: inline-block; margin: 5px 5px"
              />
              <a-button
                style="margin-right: 5px; background-color: #d9d9d9"
                type="default"
                shape="circle"
                icon="minus"
                size="small"
                @click="removeBindCategory(index)"
              />
            </div>

            <a-button
              type="primary"
              class="add-button"
              icon="plus"
              @click="handleAddBindCategory"
            >
              添加
            </a-button>
          </a-form-model-item>
        </div>

        <a-form-model-item
          label="企业法人为"
          style="width: 66%; margin-top: 50px"
          :required="true"
          :colon="false"
        >
          <a-radio-group v-model="form.legalPersonType">
            <a-radio
              v-for="item in this.$sysDictOptions('legalPersonType')"
              :key="item.k"
              :value="item.k"
              class="radio-item"
            >
              {{ item.v }}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>

        <!-- 企业法人证件 -->
        <a-row>
          <a-col :lg="{ span: 15, offset: 1 }">
            <a-form-model-item
              label="企业法人证件"
              :label-col="{ span: 24 }"
              :wrapper-col="{ span: 24 }"
              :required="true"
              :colon="false"
            >
              <div
                class="description"
                style="margin-top: 10px; margin-bottom: 20px; font-size: 12px"
              >
                格式为JPG、JPEG、PNG，大小不超过10MB
              </div>
              <a-form-model-item
                style="display: inline-block; margin: 0px 60px"
              >
                <w-image-upload
                  class="avatar-uploader"
                  text="上传"
                  :multipleFlag="false"
                  :file-max-size="1"
                  v-model="form.legalPersonIdImage1"
                  bizPath="companyPic"
                ></w-image-upload>
                <p style="font-size: 13px; color: #d9d9d9; margin: 5px 0px">
                  身份证正面
                </p>
              </a-form-model-item>

              <a-form-model-item
                style="display: inline-block; margin: 0px 60px"
              >
                <w-image-upload
                  class="avatar-uploader"
                  text="上传"
                  :multipleFlag="false"
                  :file-max-size="1"
                  v-model="form.legalPersonIdImage2"
                  bizPath="companyPic"
                ></w-image-upload>
                <p style="font-size: 13px; color: #d9d9d9; margin: 5px 0px">
                  身份证反面
                </p>
              </a-form-model-item>
            </a-form-model-item>
          </a-col>

          <a-col :lg="{ span: 13, offset: 17 }" :style="{ marginTop: '-77px' }">
            <a-form-model-item label="姓名" :required="true" :colon="false">
              <a-input
                v-model="form.legalPerson"
                placeholder="请输入法人姓名"
              />
            </a-form-model-item>

            <a-form-model-item label="证件号" :required="true" :colon="false">
              <a-input
                v-model="form.legalPersonIdNumber"
                placeholder="请输入证件号"
              />
            </a-form-model-item>
            <a-form-model-item label="有效期" :required="true" :colon="false">
              <span style="display: inline-block">是否长期有效 </span>
              <span style="display: inline-block; margin-left: 20px">
                <a-radio-group v-model="form.legalPersonIsLongTerm">
                  <a-radio key="1" value="1" class="radio-item">是</a-radio>
                  <a-radio key="0" value="0" class="radio-item">否</a-radio>
                </a-radio-group>
              </span>
              <a-form-model-item
                label=""
                required
                v-if="form.legalPersonIsLongTerm == '0'"
              >
                <a-range-picker
                  v-model="numberPeriodValidityDate"
                  @change="numberPeriodValidityDateChange"
                />
              </a-form-model-item>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 企业证照 -->
        <a-divider orientation="left">企业证照</a-divider>
        <div style="margin-left: 4.5%">
          <a-form-model-item
            :colon="false"
            :label-col="{ span: 24 }"
            :wrapper-col="{ span: 24 }"
          >
            <div
              class="description"
              style="margin-top: 10px; margin-bottom: 20px; font-size: 12px"
            >
              文字需清晰可辨认，格式为JPG、JPEG、PNG，大小不超过10MB
            </div>
            <a-row>
              <a-col :lg="{ span: 10, offset: 1 }">
                <a-form-model-item label="营业执照" :colon="false" required>
                  <w-image-upload
                    class="avatar-uploader"
                    text="上传"
                    :multipleFlag="false"
                    :file-max-size="1"
                    v-model="form.businessLicenseImage"
                    bizPath="companyPic"
                  ></w-image-upload>
                </a-form-model-item>
              </a-col>
              <a-col
                :lg="{ span: 10, offset: 15 }"
                :style="{ marginTop: '0px' }"
              >
                <a-form-model-item
                  label="有效期"
                  :required="true"
                  :colon="false"
                >
                  <span style="display: inline-block">是否长期有效 </span>
                  <span style="display: inline-block; margin-left: 20px">
                    <a-radio-group v-model="form.businessIsLongTerm">
                      <a-radio key="1" value="1" class="radio-item">是</a-radio>
                      <a-radio key="0" value="0" class="radio-item">否</a-radio>
                    </a-radio-group>
                  </span>
                  <a-form-model-item
                    label=""
                    required
                    v-if="form.businessIsLongTerm == '0'"
                  >
                    <a-range-picker
                      v-model="businessPeriodValidityDate"
                      @change="businessPeriodValidityDateChange"
                    />
                  </a-form-model-item>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model-item>
        </div>

        <div style="margin-left: 4.5%; margin-top: 25%">
          <a-divider orientation="left">公司logo</a-divider>
          <a-form-model-item
            :colon="false"
            :label-col="{ span: 24 }"
            :wrapper-col="{ span: 24 }"
          >
            <div
              class="description"
              style="margin-top: 10px; margin-bottom: 20px; font-size: 12px"
            >
              文字需清晰可辨认，格式为JPG、JPEG、PNG，大小不超过10MB
            </div>
            <a-row>
              <a-col :lg="{ span: 10, offset: 1 }">
                <a-form-model-item :colon="false" required>
                  <w-image-upload
                    class="avatar-uploader"
                    text="上传"
                    :multipleFlag="false"
                    :file-max-size="1"
                    v-model="form.companyLogo"
                    bizPath="companyPic"
                  ></w-image-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model-item>
        </div>

        <!-- 提交按钮 -->
        <a-form-model-item
          v-if="isShowSubmit"
          :wrapper-col="{ span: 14, offset: 6 }"
          style="margin-top: 20%; text-align: center"
        >
          <a-button
            @click="handleSubmit"
            type="primary"
            :loading="confirmLoading"
            style="margin-right: 10px"
          >
            提交
          </a-button>
        </a-form-model-item>
      </div>

      <a-alert
        v-if="isShowSubmit == false && form.companyName == null"
        :message="'当前链接已失效,请联系管理员'"
        type="warning"
        show-icon
        class="form-alert"
      >
      </a-alert>
    </a-form-model>
    <!-- 数据校验码 -->
    <a-modal
      :width="400"
      :visible="visible"
      :confirmLoading="confirmCodeLoading"
      @ok="handleCodeSubmit"
      @cancel="handleCodeCancel"
      cancelText="关闭"
      title="请填写校验码"
    >
      <!-- 校验码 -->
      <a-form-item label="">
        <a-input v-model="checkCode" />
      </a-form-item>
    </a-modal>
    <!-- 弹框 -->
    <a-modal
      title="填写说明"
      :width="800"
      :visible="visibleSm"
      :destroyOnClose="true"
      @ok="handleModalCancel"
      @cancel="handleModalCancel"
      cancelText="关闭"
      :footer="null"
    >
      <div class="instructions-container">
        <div class="instructions-content">
          <!-- 说明内容 -->
          <div class="instructions-text">
            <p>
              此表单由供应商人员进行填写，提交后信息将自动同步至医院端作为供应商主数据信息，请认真填写。
            </p>

            <ol class="instruction-list">
              <li>
                公司名称请填写请填写产品注册证或营业执照上显示的公司全称，税号/社会信用代码作为公司唯一性数据，请确保填写准确无误；
              </li>
              <li>
                企业资质将纳入医院对公司评级标准中的重要信息，请务必填写完整、准确，如证件即将到期或已失效，请及时更换；
              </li>
              <li>
                红色"<span class="required-star">*</span
                >"号项为必填项，提交表单前请认真检查必填项是否填写完整，如果未填写完整则无法正常提交。
              </li>
              <li>填写过程中如关闭网页，将不会保存所填信息，请慎重！</li>
            </ol>
          </div>

          <!-- 确认按钮 -->
          <div class="action-button">
            <a-button type="primary" @click="handleModalCancel">
              已明白
            </a-button>
          </div>
        </div>
      </div>
      <template slot="footer"></template>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import md5 from 'md5'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'supplier1',
  components: {
    WImageUpload,
  },
  data() {
    return {
      visibleSm: false,
      checkCode: '',
      confirmLoading: false,
      confirmCodeLoading: false,
      isShowSubmit: true,
      key: '',
      visible: false,
      loading: false,
      imageUrl: '',
      selectedRegion: '',
      categoryList: [],
      brandList: [],
      detailAddress: '',
      selectedType: 'mainland', // 默认选中"大陆居民"
      selectedType1: '0', // 默认选中"否"
      numberPeriodValidityDate: null,
      businessPeriodValidityDate: null,
      form: {
        legalPersonIsLongTerm: '0',
        businessIsLongTerm: '1',
        companyName: undefined,
        createTime: undefined,
        legalPerson: undefined,
        unifiedCode: undefined,
        registrationNo: undefined,
        incorporationDate: undefined,
        bankAccount: undefined,
        backAccountName: undefined,
        fixedTelephone: undefined,
        email: undefined,
        remarks: undefined,
        economize: undefined,
        market: undefined,
        distinguish: undefined,
        address: undefined,
        website: undefined,
        profile: undefined,
        category: undefined,
        brand: undefined,
        legalPersonType: '0',
        legalPersonIdImage1: undefined,
        legalPersonIdImage2: undefined,
        legalPersonIdNumber: undefined,
        startNumberPeriodValidityDate: undefined,
        endNumberPeriodValidityDate: undefined,
        businessLicenseImage: undefined,
        startBusinessPeriodValidityDate: undefined,
        endBusinessPeriodValidityDate: undefined,
        companyLogo: undefined,
        collaborativeKey: undefined,
        checkCode: undefined,
        collaborationValidityTime: '',
      },
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          scopedSlots: {
            customRender: 'name',
            title: 'nameTitle',
          },
        },
        {
          title: '职位',
          dataIndex: 'position',
          scopedSlots: {
            customRender: 'position',
          },
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          scopedSlots: {
            customRender: 'phone',
            title: 'phoneTitle',
          },
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          scopedSlots: { customRender: 'email' },
        },
        {
          title: '微信',
          dataIndex: 'wechat',
          scopedSlots: { customRender: 'wechat' },
        },
        {
          title: 'QQ',
          dataIndex: 'qq',
          scopedSlots: { customRender: 'qq' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '10%',
          scopedSlots: { customRender: 'action' },
        },
      ],
      supplierContactsList: [this.createContactsNewRow()],
      url: {
        saveInfo: '/system/devSupplier/save',
        get: '/system/devSupplier/info',
      },
    }
  },
  computed: {
    editableContactsColumns() {
      return this.columns.filter((col) => col.dataIndex !== 'action')
    },
    // 检查是否有错误
    hasErrors() {
      return this.supplierContactsList.some(
        (row) => row.errors && Object.keys(row.errors).length > 0
      )
    },
  },
  created() {
    this.visible = false
    this.isShowSubmit = false
    if (this.$route.query.key) {
      var key = this.$route.query.key
      getAction(this.url.get, {
        id: null,
        collaborativeKey: key,
      }).then((res) => {
        this.$nextTick(() => {
          if (res.code == '0000') {
            this.visible = true
            var record = res.result.data

            if (record.supplierType) {
              record.supplierType = record.supplierType.split(',')
            }
            //种类
            if (record.category) {
              this.categoryList = record.category.split(',')
            }
            //品牌
            if (record.brand) {
              this.brandList = record.brand.split(',')
            }
            //联系人列表
            if (record.supplierContactsList) {
              this.supplierContactsList = JSON.parse(
                record.supplierContactsList
              )
            }
            if (record.startNumberPeriodValidityDate) {
              this.numberPeriodValidityDate = [
                record.startNumberPeriodValidityDate,
                record.endNumberPeriodValidityDate,
              ]
            }

            if (record.startBusinessPeriodValidityDate) {
              this.businessPeriodValidityDate = [
                record.startBusinessPeriodValidityDate,
                record.endBusinessPeriodValidityDate,
              ]
            }
            this.form = record
          }
        })
      })
    }
  },
  methods: {
    moment,
    //关闭弹框
    handleModalCancel() {
      this.visibleSm = false
    },
    // START添加联系人
    // 创建新行
    createContactsNewRow() {
      return {
        key: Date.now().toString(),
        name: '',
        position: '',
        phone: '',
        email: '',
        wechat: '',
        qq: '',
        errors: {},
      }
    },

    // 添加新行
    addContactsRow(index) {
      if (this.hasErrors) return
      this.supplierContactsList.splice(
        index + 1,
        0,
        this.createContactsNewRow()
      )
    },

    // 删除行
    removeContactsRow(index) {
      this.supplierContactsList.splice(index, 1)
    },

    // 验证字段
    validateContactsField(record, field) {
      // 清除旧错误
      if (record.errors && record.errors[field]) {
        this.$delete(record.errors, field)
      }

      // 必填校验规则
      const requiredFields = ['name', 'phone']
      if (requiredFields.includes(field) && !record[field]) {
        this.$set(
          record.errors,
          field,
          `${this.getContactsFieldTitle(field)}不能为空`
        )
      }
    },

    // 获取字段标题
    getContactsFieldTitle(field) {
      const column = this.columns.find((col) => col.dataIndex === field)
      return column ? column.title : field
    },
    // END添加联系人
    handleAddCategory() {
      // 这里处理添加品类逻辑
      console.log('添加品类按钮被点击')
      // 可以在这里弹出模态框或展开表单
      this.categoryList.push('')
    },
    removeCategory(index) {
      this.categoryList.splice(index, 1)
    },

    handleAddBindCategory() {
      // 这里处理添加品类逻辑
      console.log('添加品牌按钮被点击')
      // 可以在这里弹出模态框或展开表单
      this.brandList.push('')
    },
    removeBindCategory(index) {
      this.brandList.splice(index, 1)
    },
    handleChange(e) {
      console.log('选中值:', e.target.value)
      // 这里可以添加选择变化的处理逻辑
    },
    handleChange1(e) {
      console.log('是否长期有效选中值:', e.target.value)
      // 这里可以添加选择变化的处理逻辑
    },
    //法人身份证有效期
    numberPeriodValidityDateChange(date, dateString) {
      if (dateString != null) {
        this.form.startNumberPeriodValidityDate = dateString[0]
        this.form.endNumberPeriodValidityDate = dateString[1]
      } else {
        this.form.startNumberPeriodValidityDate = undefined
        this.form.endNumberPeriodValidityDate = undefined
      }

      console.log('XXXX>>>', date, dateString)
    },
    //营业执照有效期
    businessPeriodValidityDateChange(date, dateString) {
      if (dateString != null) {
        this.form.startBusinessPeriodValidityDate = dateString[0]
        this.form.endBusinessPeriodValidityDate = dateString[1]
      } else {
        this.form.startBusinessPeriodValidityDate = undefined
        this.form.endBusinessPeriodValidityDate = undefined
      }
    },

    //校验校验码是否正确
    handleCodeSubmit() {
      this.isShowSubmit = false
      //用户输入的code
      var checkCode = this.checkCode
      if (checkCode == null) {
        this.$message.error('校验码不能为空!')
        return
      }
      //接口返回的加密code
      var code = this.form.checkCode
      //使用md5进行加密
      var md5Code = md5(checkCode)
      if (code == md5Code) {
        this.isShowSubmit = true
        this.visibleSm = true
        this.visible = false
      } else {
        this.$message.error('校验码输入不正确!')
        return
      }
    },
    handleCodeCancel() {
      this.visible = false
      this.isShowSubmit = false
    },
    handleSubmit() {
      this.form.supplierType = this.form.supplierType + ''
      this.form.supplierContactsList = JSON.stringify(this.supplierContactsList)
      this.form.category = this.categoryList + ''
      this.form.brand = this.brandList + ''

      var form = this.form

      if (form.companyName == null || form.companyName == '') {
        this.$message.error('公司名称不能为空!')
        return
      }

      if (form.legalPerson == null || form.legalPerson == '') {
        this.$message.error('法人姓名不能为空!')
        return
      }

      if (form.unifiedCode == null || form.unifiedCode == '') {
        this.$message.error('统一社会信用代码不能为空!')
        return
      }

      if (form.registrationNo == null || form.registrationNo == '') {
        this.$message.error('注册号不能为空!')
        return
      }

      if (form.incorporationDate == null || form.incorporationDate == '') {
        this.$message.error('成立日期不能为空!')
        return
      }

      if (form.supplierType == null || form.supplierType.length <= 0) {
        this.$message.error('供应商类型不能为空!')
        return
      }

      if (form.address == null || form.address == '') {
        this.$message.error('公司详细地址不能为空!')
        return
      }
      if (form.legalPersonIdImage1 == null || form.legalPersonIdImage1 == '') {
        this.$message.error('企业法人身份证正面不能为空!')
        return
      }

      if (form.legalPersonIdImage2 == null || form.legalPersonIdImage2 == '') {
        this.$message.error('企业法人身份证反面不能为空!')
        return
      }

      if (form.legalPersonIdNumber == null || form.legalPersonIdNumber == '') {
        this.$message.error('企业法人证件号不能为空!')
        return
      }

      if (form.legalPersonIsLongTerm == '0') {
        if (form.startNumberPeriodValidityDate == null) {
          this.$message.error('企业法人证件号有效期日期不能为空!')
          return
        }
      }

      if (
        form.businessLicenseImage == null ||
        form.businessLicenseImage == ''
      ) {
        this.$message.error('请上传营业执照!')
        return
      }

      if (form.businessIsLongTerm == '0') {
        if (form.startBusinessPeriodValidityDate == null) {
          this.$message.error('营业执照有效日期不能为空!')
          return
        }
      }
      this.confirmLoading = true
      //调用接口进行提交数据
      postAction(this.url.saveInfo, this.form)
        .then((res) => {
          if ((res.code = '0000')) {
            this.$message.success('提交成功')
            this.confirmLoading = false
          } else {
            this.$message.error(res.content)
            this.confirmLoading = false
          }
        })
        .finally((e) => {
          this.confirmLoading = false
        })
      console.log('form>>', this.form)
    },
  },
}
</script>

<style scoped>
@import url('../../../css/supplier/supplier.css');
</style>
